<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <DividerHeader title="警务人员列表"/>
        <Bailiffs :more-choose="true" :isFilter="true" v-model:uses="policeUserList"/>
        <div class="mb-4"></div>
        <DividerHeader title="辅警人员列表"/>
        <AuxiliaryPolice :more-choose="true" v-model:uses="auxiliaryPoliceList"/>
        <!-- {{ userdata }} -->
        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import DividerHeader from "@/components/DividerHeader/DividerHeader.vue";
import Bailiffs from "@/components/PoliceUserTable/Bailiffs.vue";
import AuxiliaryPolice from "@/components/PoliceUserTable/AuxiliaryPolice.vue";

const emit = defineEmits(['user', 'userKey'])
const {isClearData} = defineProps(['isClearData'])

const isShow = ref(false)
const title = ref('')

// 法警人员列表
const policeUserList = ref({})
// 辅警人员
const auxiliaryPoliceList = ref({})
const userdata = ref()
// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value;
}

const showSelect = async (name, userList = {}) => {
    changeShowStatus()
    title.value = name;
    if (userList) {
        policeUserList.value = userList.value;
        auxiliaryPoliceList.value = userList.value;
    }
}

defineExpose({showSelect})


// 监听 isClearData 的数据状态
// watch(() => isClearData, (status) => {
//     if (status) {
//         policeUserList.value = []
//         auxiliaryPoliceList.value = []
//     }
// })

const submitHandle = () => {
    // 如果法警人员数量至少要有一位，否则禁止提交
    // if (policeUserList.value.length < 1) {
    //     ElMessage.error('请选择至少一位警务人员。')
    //     return '';
    // }
    // const users = [
    //     policeUserList.value,
    //     auxiliaryPoliceList.value
    // ].filter(list => list && list.length > 0).flat();
    const users = [
        policeUserList.value,
        auxiliaryPoliceList.value
    ].filter(list => list && list.length > 0).reduce((acc, val) => acc.concat(val), []);
    userdata.value = users
    emit('user', users)
    changeShowStatus()
}

</script>

<style scoped lang="scss">

</style>